<template>
  <view class="navbar">
    <!-- 返回按钮 -->
    <view class="navbar-left" @click="handleBack">
      <image
        src="/static/img/components/beBack.png"
        class="back-icon"
        mode="aspectFit"
      />
    </view>

    <!-- 标题 -->
    <view class="navbar-center">
      <text class="navbar-title">{{ title }}</text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '页面标题',
  },
  // 自定义返回函数
  customBack: {
    type: Function,
    default: null,
  },
  // 是否禁用默认返回行为
  // 如果有自定义跳转，建议明确禁用默认行为
  disableDefaultBack: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['back']);

const handleBack = () => {
  // 触发 back 事件
  emit('back');
  
  // 如果有自定义返回函数，优先执行
  if (props.customBack && typeof props.customBack === 'function') {
    props.customBack();
    return;
  }
  
  // 如果禁用了默认返回行为，则不执行
  if (props.disableDefaultBack) {
    return;
  }
  
  // 使用滑出动画，模拟手势返回效果
  uni.navigateBack({
    delta: 1,
  });
};

</script>

<style scoped lang="scss">
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 64rpx 32rpx 0;
  width: 100%;
  @include header-background;
  @include header-fixed;
  // 不加毛玻璃，保证内容清晰
}

.navbar-left {
  display: flex;
  align-items: center;
}

.navbar-center {
  flex: 1;
  text-align: center;
  padding: 0 10rpx 0 0;
}

.navbar-title {
  font-size: 36rpx;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back-icon {
  width: 20rpx;
  height: 32rpx;
}
</style>
